css常见布局方式

2023-06-24 00:03| 来源: 网络整理| 查看: 265

css常见布局方式 0、前言1、两栏布局1.1 浮动 + margin1.2 浮动 + BFC（overflow: hidden）1.3 定位 + margin-left1.4 给父容器设置flex布局，左盒子固定宽度，然后给右子元素设置 flex: 1。1.5 table布局 2、三栏布局2.1 float布局2.2 position布局2.3 flex布局2.4 table布局2.5 网格(gird)布局: 3、总结

0、前言

CSS 的布局应该是 CSS 体系中的重中之重，主要的布局方式有 table 表格布局（早期），float 浮动布局、position布局和 flex 布局。

实现效果如下：在这里插入图片描述

1、两栏布局

指的是左边固定，右边自适应。

1.1 浮动 + margin

先将左元素设置定宽为100px，并左浮动。然后给右元素设置margin-left，值等于左元素的宽度。

代码如下：

Document .left { width: 200px; height: 200px; background-color: #f00; float: left; } .right { height: 200px; background-color: aqua; margin-left: 100px; } 1.2 浮动 + BFC（overflow: hidden）

触发BFC后，右元素就会环绕着浮动的元素，不会被浮动的元素所覆盖。

代码如下：

Document .left { width: 200px; height: 200px; background-color: #f00; float: left; } .right { height: 200px; background-color: aqua; overflow: hidden } 1.3 定位 + margin-left

先给父元素设置position: relative、左子元素设置position: absolute，然后给左子元素设置left: 0 并设置宽度，然后给右子元素设置 margin-left，值等于左子元素的宽度。

代码如下：

Document .container { position: relative } .left { width: 200px; height: 200px; background-color: #f00; position: absolute; left: 0; } .right { height: 200px; background-color: aqua; margin-left: 200px; } 1.4 给父容器设置flex布局，左盒子固定宽度，然后给右子元素设置 flex: 1。

代码如下：

Document .container { display: flex; } .left { width: 200px; height: 200px; background-color: #f00; } .right { height: 200px; background-color: aqua; flex: 1; } 1.5 table布局

代码如下：

Document /* table布局：(display:table-cell后)子级容器默认是自动平分宽度沾满父级容器； */ .container { display: table; height: 300px; width: 100%; } .left { display: table-cell; /* 定宽 */ width: 200px; /*height: 100% 因为未脱离文档流，所以不用设置高度也行*/ background-color: chartreuse; } .right { /*height: 100% 因为未脱离文档流，所以不用设置高度也行*/ display: table-cell; background-color: coral; } 2、三栏布局

顾名思义就是两边固定，中间自适应。

实现效果如下：在这里插入图片描述

2.1 float布局 Document .left { float: left; width: 100px; height: 200px; background-color: red; } .right { float: right; width: 100px; height: 200px; background-color: blue; } .center { background-color: aqua; height: 200px; margin-left: 100px; margin-right: 100px; } 2.2 position布局 Document .left { position: absolute; left: 0; width: 200px; height: 200px; background-color: red; } .right { position: absolute; right: 0; width: 200px; background-color: blue; height: 200px; } .center { position: absolute; left: 200px; right: 200px; background-color: aqua; height: 200px; } 2.3 flex布局

代码如下：

Document .container { display: flex; } .left { width: 200px; height: 200px; background: red; } .right { width: 200px; height: 200px; background: blue; } .center { /* margin: 0; */ background-color: aqua; width: 100%; } 2.4 table布局

代码如下：

Document .container { width: 100%; display: table; } .left, .center, .right { display: table-cell; } .left { width: 200px; height: 200px; background-color: aqua; } .center { height: 200px; background-color: red; } .right { width: 200px; height: 200px; background-color: blue; } 2.5 网格(gird)布局:

代码如下：

Document .container { width: 100%; display: grid; grid-template-rows: 200px; grid-template-columns: 200px auto 200px; } .left { background-color: aqua; } .center { background-color: red; } .right { background-color: blue; } 3、总结布局方式优点缺点浮动布局兼容性好，支持大多数浏览器；可以实现多列布局。容易出现清除浮动问题，需要额外的样式规则来处理；不太适合复杂的布局需求，例如垂直居中和等高布局。定位布局灵活性较高，可以精确控制元素的位置；可以实现重叠布局效果。对于复杂布局，需要手动计算和调整元素的位置和尺寸。当元素的位置改变时，可能需要手动调整其他相关元素的位置。表格布局可以实现简单的等高布局和垂直居中；兼容性良好，支持大多数浏览器。结构复杂，不适用于非表格内容的布局；语义化不强，使用表格元素来布局非表格内容不符合标准。弹性盒子布局简单易用，可以快速实现自适应布局；支持灵活的对齐和排列方式；适用于响应式设计。在某些情况下，对于复杂布局需求可能需要额外的样式规则。网格布局提供了强大的网格系统，可以实现复杂的布局；可以方便地进行元素的放置和对齐；支持自适应和响应式设计。兼容性方面，部分较老的浏览器对网格布局支持较差。

【本文地址】

公司简介

联系我们